<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app2">
      <h1>app2</h1>

     
      <button @click='changeMyData'>点击改变父组件自己的值</button>
       <!-- 第一种写法  传值  静态传值 -->
        <!-- 第二种动态传值 -->

        <newcom1 title1='' :data='msg' :lists='list'></newcom1>

        <newcom2 title2='' :data='msg'></newcom2>


        <newcom3 title3='' :data='msg'></newcom3>

     
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

      // 组件1注册
      let newcom1 = {
          props:['title1','lists','data'],
        data() {
          return {
            msg: "newcom1",
          }
        },
        template: `
        <div>
          {{msg}}
          {{title1}}
          {{data}}

                 <ul>
                     <li v-for='(item,index) in lists '>
                         {{item}}
                     </li>
                 </ul>
        </div>
        `,
      };
      //组件2注册
      let newcom2 = {
        props:['title2','data'],
        data() {
          return {
            msg: "newcom2",
          }
        },
        template: "<div>{{msg}}---{{title2}}--{{data}}</div>",
      };

      let newcom3 = {
        props :['title3','data'],
        template:
        `
          <div>
          {{msg}}----
          {{title3}}--
            {{data}}
            <button @click='changeData'> 点击改变父组件的值</button>
          </div>
        `,
        data() {
                return {
                    msg: '  newcom3'
                }
            },

            methods: {
                changeData() {
                    alert(1)
                    this.data='叫爸爸 哈哈哈'
                }
                
            },
           
           
        }


      var vm2 = new Vue({
        el: "#app2",
       
        data:{
          msg:'我是你爸爸真伟大',
            list:['苹果','香蕉','菠萝'],
           
        },
        methods: {
          changeMyData(){
            alert(1)
            this.msg='养你那么大'
          }
        },
        components:{
          newcom1,
          newcom2,
          newcom3
        }
      });
    </script>
  </body>
</html>
